<template>
<div class="list-content">
    <div class="clearfix mb10">
        <div class="fr">
            <router-link :to="this.$route.matched[1].path">
                <input type="button" class="uiBtn-normal uiBtn-orange fl" value="返回">
            </router-link>
        </div>
    </div>
    <table class="uiTable">
        <thead>
            <tr>
                <th width="3%">序号</th>
                <th width="5%">
                    <select class="theadselect thinScroll" v-model="cityValue" @change="search()">
                        <option value="">地区</option>
                        <option :value="item.id" v-for="(item, index) in cityList" :key='index'>城-{{item.city_name}}</option>
                        <option :value="item.dq_id" v-for="(item, index) in DivisionList" :key='index + cityList.length'>{{item.dq_name}}</option>
                    </select>
                </th>
                <th width="4%">阶段</th>
                <th width="6%" class="relative searchBox">
                    <div v-show="proManStatus" class="dailyftSearch dailyftSearch1 clearfix">
                        <div class="fl uiHas-textIcon">
                            <input @keyup.enter="search(1)" type="text" class="col-md-12" placeholder="项目经理" v-model='proMan'>
                            <i class="uiText-searchIcon bgIcon" @click="search(1)"></i>
                        </div>
                    </div>
                    <span class="serial_number" @click="proManStatus = true" v-show="!proManStatus">项目经理<i class="bgIcon"></i></span>
                </th>
                <th width="7%" class="relative searchBox">
                    <div v-show="ordernoStatus" class="dailyftSearch dailyftSearch1 clearfix">
                        <div class="fl uiHas-textIcon">
                            <input @keyup.enter="search(2)" type="text" class="col-md-12" placeholder="项目单号" v-model='orderno'>
                            <i class="uiText-searchIcon bgIcon" @click="search(2)"></i>
                        </div>
                    </div>
                    <span class="serial_number" @click="ordernoStatus = true" v-show="!ordernoStatus">项目单号<i class="bgIcon"></i></span>
                </th>
                <th width="11%" class="relative searchBox">
                    <div v-show="proNameStatus" class="dailyftSearch dailyftSearch1 clearfix">
                        <div class="fl uiHas-textIcon">
                            <input @keyup.enter="search(3)" type="text" class="col-md-12" placeholder="项目名称" v-model="proName">
                            <i class="uiText-searchIcon bgIcon" @click="search(3)"></i>
                        </div>
                    </div>
                    <span class="serial_number" @click="proNameStatus = true" v-show="!proNameStatus">项目名称<i class="bgIcon"></i></span>
                </th>
                <th width="7%">发起时间
                    <!-- <div class="thSortBox2 clearfix">
                        <span class="fl">发起时间</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt" @click="sortData('deposit_creat_time', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('deposit_creat_time', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div> -->
                </th>
                <th width="5%">
                    <select class="theadselect thinScroll" v-model="fineType" @change="fineSelect()">
                        <option value="0">罚款类型</option>
                        <option value="10">巡罚扣保</option>
                        <option value="11">外罚扣保</option>
                        <option value="12">客罚扣保</option>
                        <option value="13">拒罚扣保</option>
                        <option value="14">退单扣保</option>
                        <option value="15">质保扣保</option>
                        <option value="16">平台费扣保</option>
                        <option value="20">材料商罚款</option>
                        <option value="21">现罚扣保</option>
                    </select>
                </th>
                <th width="5%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">罚款金额</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('pm_deposit', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('pm_deposit', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="10%">罚款事由</th>
                <th width="5%">财务状态</th>
                <th width="5%">结算单号</th>
                <th width="7%">结算时间
                    <!-- <div class="thSortBox2 clearfix">
                        <span class="fl">结算时间</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt" @click="sortData('deposit_update_time', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('deposit_update_time', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div> -->
                </th>
                <th width="5%">
                     <div class="thSortBox2 clearfix">
                        <span class="fl">团分金额</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('pm_deposit', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb"  @click="sortData('pm_deposit', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="10%">团分账明细</th>
                <th width="5%">操作人</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="3%">合计</td>
                <td width="5%">--</td>
                <td width="4%">--</td>
                <td width="6%">--</td>
                <td width="7%">{{listData.length}}</td>
                <td width="11%">--</td>
                <td width="7%">--</td>
                <td width="5%">--</td>
                <td width="5%">{{fineMoney}}</td>
                <td width="10%">--</td>
                <td width="5%">--</td>
                <td width="5%">--</td>
                <td width="7%">--</td>
                <td width="5%">{{teamMoney}}</td>
                <td width="10%">--</td>
                <td width="5%">--</td>
            </tr>
        </tbody>
    </table>
    <div class="thinScroll thinScroll-table" v-scrollHeight="15" v-loading="loading" >
        <table class="uiTable uiTable-striped-odd uiTable-hover">
            <tbody>
                <tr v-for="(item,index) in listData" :key="index">
                    <td width="3%">{{index + 1}}</td>
                    <td width="5%">{{item.dq_name === null ? '--' : item.dq_name}}</td>
                    <td width="4%">{{item.AfterMarketState === null ? '--' : item.AfterMarketState | stageFilter()}}</td>
                    <td width="6%">{{item.pm_user_name === null ? '--' : item.pm_user_name}}</td>
                    <td width="7%">{{item.order_No === null ? '--' : item.order_No}}</td>
                    <td width="11%" :data-title="item.proname">{{item.proname === null ? '--' : item.proname | truncate(10)}}</td>
                    <td width="7%">{{item.deposit_creat_time === null ? '--' : $utils.format('yyyy-MM-dd',item.deposit_creat_time)}}</td>
                    <td width="5%"> {{item.pm_data_source === null ? '--' : item.pm_data_source | fineStyle}}</td>
                    <td width="5%"> {{item.pm_deposit === null ? '--' : item.pm_deposit}}</td>
                    <td width="10%" :data-title="item.pm_deposit_remark"> {{item.pm_deposit_remark === null ? '--' : item.pm_deposit_remark | truncate(10) }} </td>
                    <td width="5%"> {{item.orderId === null ? '未分账' : '已分账'}}</td>
                    <td width="5%"> {{item.orderId === null ? '--' : item.orderId}}</td>
                    <td width="7%"> {{item.settlement_time === null ? '--' : $utils.format('yyyy-MM-dd',item.settlement_time )}}</td>
                    <td width="5%"> {{item.pm_deposit &&  Math.abs(item.pm_deposit) > 0 ? Number(Math.abs(item.pm_deposit)) * 0.5 : 0 }}</td>
                    <td width="10%" :data-title="item.split_remark"> {{item.split_remark === null ? '--' : item.split_remark | truncate(10) }}</td>
                    <td width="5%">{{item.creat_user === null ? '--' : item.creat_user }}</td>
                </tr>
                <tr v-if="listData.length === 0"> <td class="tx-center" colspan="31">暂无数据</td></tr>
            </tbody>
        </table>
        <!-- <div class="thSortBox" v-if="isShowLoad">
            <div class="animateBox">
                <p class="animate animate1"></p>
                <p class="animate animate2"></p>
                <p class="animate animate3"></p>
                <p class="animate animate4"></p>
                <p class="animate animate5"></p>
            </div>
        </div> -->
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getSiteFines, getSitelist } from '../../Resources/Api/index'
export default {
    data () {
        return {
            DivisionList: [], // 分司 数组
            cityList: [], // 城 数组
            fineType: 0, // 罚款类型
            busy: false, // 滚动是否等待
            listData: [], // 列表数据
            listCloneData: [], // 列表数据拷贝
            loading: false, // 是否loading
            cityValue: '', // 城市Value
            proMan: '', // 项目经理value
            proManStatus: false, // 项目经理搜索
            orderno: '', // 项目单号Value
            ordernoStatus: false, // 项目单号
            proName: '', // 项目名称Value
            proNameStatus: false // 项目名称
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo']),
        fineMoney () {
            let money = 0
            this.listData.forEach(item => {
                if (item.pm_deposit !== null) {
                    money += item.pm_deposit
                }
            })
            if (Math.abs(money) > 10000) {
                return `${(money / 10000).toFixed(2)}万`
            } else {
                return money.toFixed(2)
            }
        },
        teamMoney () {
            let teamoney = 0
            this.listData.forEach(item => {
                if (item.pm_deposit !== null) {
                    teamoney += Math.abs(item.pm_deposit) > 0 ? Math.abs(item.pm_deposit) * 0.5 : 0
                }
            })
            if (Math.abs(teamoney) > 10000) {
                return `${(teamoney / 10000).toFixed(2)}万`
            } else {
                return teamoney.toFixed(2)
            }
        }
    },
    created () {
        let parm = {}
        this.getCityList()
        this.getSiteFines(parm)
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 切换搜索
        seachIcoSwitch () {
            this.seachIco = !this.seachIco
        },
        // 加载页面
        getSiteFines (parm) {
            this.fineType = 0
            // 用_this 代替this
            let _this = this
            if (this.listData.length === 0) {
                _this.loading = true
            }
            // 接收参数
            // 获取列表数据
            getSiteFines(parm).then(results => {
                if (results.data.StatusCode === 1) {
                    this.listCloneData = results.data.siteFineList
                    this.listData = this.listCloneData
                    this.fineSelect()
                    this.loading = false
                }
            }).catch(error => {
                _this.loading = false
                console.log(error)
            })
        },
        // 获取城市List
        getCityList () {
            getSitelist({}).then((results) => {
                if (results.data.jsonArray.length > 0) {
                    this.cityList = results.data.jsonArray
                }
                if (results.data.rsglDiqus.length > 0) {
                    this.DivisionList = results.data.rsglDiqus
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 排序函数
        compare (prop, type) {
            // 从小到大
            if (type === 1) {
                return function (a, b) {
                    return a[prop] - b[prop]
                }
            // 从大到小
            } else if (type === 2) {
                return function (a, b) {
                    return b[prop] - a[prop]
                }
            }
        },
        // 罚款类型筛选
        fineSelect () {
            if (Number(this.fineType) !== 0) {
                this.listData = this.listCloneData.filter((item) => {
                    return Number(item.pm_data_source) === Number(this.fineType)
                })
            } else {
                this.listData = this.listCloneData
            }
        },
        // 从大到小
        sortData (value, type) {
            this.listData = this.listData.sort(this.compare(value, type))
        },
        // 城市筛选
        search (flag) {
            switch (Number(flag)) {
            case 1:
                this.proManStatus = false
                break
            case 2:
                this.ordernoStatus = false
                break
            case 3:
                this.proNameStatus = false
                break
            default:
                break
            }
            let parms = {}
            if (this.cityValue !== '') {
                parms.dq_id = this.cityValue
            }
            if (this.orderno !== '') {
                parms.order_no = this.orderno
            }
            if (this.proMan !== '') {
                parms.pm_user_name = this.proMan
            }
            if (this.proName !== '') {
                parms.proname = this.proName
            }
            this.getSiteFines(parms)
        }
    },
    watch: {
        leftInfo () {
            this.getByOrderCode()
        }
    },
    filters: {
        fineStyle (num) {
            let value = ''
            switch (Number(num)) {
            case 10:
                value = '巡罚扣保'
                break
            case 11:
                value = '外罚扣保'
                break
            case 12:
                value = '客罚扣保'
                break
            case 13:
                value = '拒罚扣保'
                break
            case 14:
                value = '退单扣保'
                break
            case 15:
                value = '质保扣保'
                break
            case 16:
                value = '平台费扣保'
                break
            case 20:
                value = '材料商罚款'
                break
            case 21:
                value = '现罚扣保'
                break
            default:
                value = ''
                break
            }
            return value
        },
        stageFilter (parone) {
            let value = ''
            switch (parone) {
            case 1:
                value = '审计'
                break
            case 2:
                value = '准备'
                break
            case 3:
                value = '在施'
                break
            case 4:
                value = '竣工'
                break
            case 5:
                value = '完工'
                break
            case 6:
                value = '历史'
                break
            case 7:
                value = '坏账'
                break
            case 8:
                value = '退单'
                break
            }
            return value
        }
    }
}
</script>
<style lang="scss" scoped>
    .uiTable td{
        word-break: break-all;
    }
    .searchBox {
        .dailyftSearch{
            width: 90px;
        }
        .dailyftSearch .uiHas-textIcon {
            width: 90px;
            margin: 4px 0 0 1px;
        }
    }

</style>
